html{
	font-size: 10px;
}
body{
	background-color: #cacad0;
}
.wrap{
	width: 60%;
	height: 620px;
	margin: 50px auto;
	border: 1px solid yellow;
	/* background: url('./img/block.gif'); */
}
.wrap .wrap-control{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.wrap .wrap-control div{
	width: 80px;
	height: 30px;
	margin-left: 5px;
	border: 2px solid black;
	line-height: 30px;
	text-align: center;
	font-size: 1.5rem;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
}
.wrap .wrap-map{
	position: relative;
	width: 560px;
	height: 560px;
	margin: 10px auto;
	background: url('../img/block.gif');
}
.wrap .wrap-map .wall{
	width: 35px;
	height: 46px;
	background: url('../img/wall.png')no-repeat;
	position: absolute;
	z-index: 11;
}
.wrap .wrap-map #people{
	width: 35px;
	height: 35px;
	/* background: url('img/down.png')no-repeat 0 0 / 35px 35px; */
	position: absolute;
	z-index: 1;
}
.wrap .wrap-map .box{
	width: 35px;
	height: 35px;
	background: url('../img/box.png')no-repeat 0 0 / 35px 35px;
	position: absolute;
}
.wrap .wrap-map .target{
	width: 35px;
	height: 35px;
	background: url('../img/ball.png')no-repeat 0 0 / 35px 35px;
	position: absolute;
}
.wrap .wrap-map .left{
	background: url('../img/left.png')no-repeat 0 0 / 35px 35px;
}
.wrap .wrap-map .right{
	background: url('../img/right.png')no-repeat 0 0 / 35px 35px;
}
.wrap .wrap-map .up{
	background: url('../img/up.png')no-repeat 0 0 / 35px 35px;
}
.wrap .wrap-map .down{
	background: url('../img/down.png')no-repeat 0 0 / 35px 35px;
}